<template>
  <div class="login_bg">
    <div class="login_adv" style="background-image: url(img/auth_banner.jpg);">
      <div class="login_adv__title">
        <h2>{{ config.APP_NAME }}</h2>
<!--        <h4>slogan</h4>-->
<!--        <p>describe</p>-->
        <div>
					<span>
						<svg-icon icon-name="ht-icon-vuejs-fill" style="width: 40px;height: 40px;" />
					</span>
          <span>
						<el-icon class="add"><el-icon-plus/></el-icon>
					</span>
          <span>
						<el-icon><el-icon-eleme-filled/></el-icon>
					</span>
        </div>
      </div>
      <div class="login_adv__bottom">
        © {{ config.APP_NAME }} {{ config.APP_VERSION }}
      </div>
    </div>
    <div class="login_main">
      <div class="login-form">
        <div class="login-header">
          <div class="logo">
            <img alt="" src="/img/logo.png">
            <label>{{ config.APP_NAME }}</label>
          </div>
          <h2>欢迎使用{{ config.APP_NAME }}</h2>
        </div>
        <el-form ref="loginForm" :model="ruleForm" :rules="rules" label-width="0" size="large">
          <el-form-item prop="user">
            <el-input v-model="ruleForm.user" prefix-icon="el-icon-user" clearable @keyup.enter="login"
                      placeholder="">
              <template #append>
                  <el-select v-model="ruleForm.userType" style="width: 130px;">
                      <el-option label="管理员" value="admin"></el-option>
                      <el-option label="用户" value="user"></el-option>
                  </el-select>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="ruleForm.password" prefix-icon="el-icon-lock" clearable show-password @keyup.enter="login"
                      placeholder=""></el-input>
          </el-form-item>
          <el-form-item prop="verifyCode">
            <el-input v-model="ruleForm.verifyCode" prefix-icon="el-icon-picture" clearable
                      placeholder="请输入验证码" :maxlength="ruleForm.verifyCodeLen" @keyup.enter="login">
              <template #append>
                <captcha ref="captcha" v-model="ruleForm.captchaId"
                         @click="() => { this.ruleForm.verifyCode = '' }"></captcha>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Captcha from "@/components/captcha.vue"
import tool from "@/utils/tool.js"
import api from "@/api/index.js"
import SvgIcon from "@/components/SvgIcon.vue";

export default {
  components: {
    SvgIcon,
    Captcha
  },
  data() {
    return {
      ruleForm: {
        user: "admin",
        password: "123456",
        autologin: false,
        verifyCode: '',
        verifyCodeLen: 4,
        captchaId: '',
          userType: 'admin',
      },
      rules: {
        user: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        verifyCode: [
          {required: true, message: '验证码不能为空', trigger: 'blur'}
        ]
      },
      islogin: false,
      lang: [
        {
          name: '简体中文',
          value: 'zh-cn',
        },
        {
          name: 'English',
          value: 'en',
        }
      ],
        config: {
            APP_NAME: import.meta.env.VITE_APP_TITLE,
            APP_VERSION: import.meta.env.VITE_APP_VERSION,
        }
    }
  },
  created: function () {
    // 如果是正式模式，剔除默认的账号密码
    if (process.env.NODE_ENV === 'production') {
      this.ruleForm.user = '';
      this.ruleForm.password = '';
    }
  },
  methods: {
    async login() {

      var validate = await this.$refs.loginForm.validate().catch(() => {
      })
      if (!validate) {
        return false
      }

      this.islogin = true
      var data = {
        type: 'hash',
        account: this.ruleForm.user,
        password: tool.crypto.MD5(this.ruleForm.password),
        captchaId: this.ruleForm.captchaId,
        verifyCode: this.ruleForm.verifyCode,
          userType: this.ruleForm.userType,
      }
      //获取token
      var res = await api.open.userLogin(data)
      if (res.code === 0) {
        tool.data.setToken(res.data.token)
        tool.data.setUserInfo(res.data.userInfo)
      } else {
        // 如果是验证码错误，刷新验证码
        if (res.code === 10001) {
          this.$refs.captcha.refresh()
          this.ruleForm.verifyCode = ''
        }
        this.islogin = false
        this.$message.warning(res.message)
        return false
      }
      //获取菜单
      let jieguo = await tool.adminGetMyMenu(api);
      if (jieguo[0] === false) {
        this.islogin = false
        this.$message.warning(jieguo[1])
        return false
      }

      setTimeout(() => {
        this.$router.replace({
          path: '/'
        });
        this.$message.success("Login Success 登录成功");
        this.islogin = false;
      }, 500)
    }
  }
}
</script>

<style scoped>
.login_bg {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
}

.login_adv {
  width: 33.33333%;
  background-color: #555;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.login_adv__title {
  color: #fff;
  padding: 40px;
}

.login_adv__title h2 {
  font-size: 40px;
}

.login_adv__title h4 {
  font-size: 18px;
  margin-top: 10px;
  font-weight: normal;
}

.login_adv__title p {
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
}

.login_adv__title div {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.login_adv__title div span {
  margin-right: 15px;
}

.login_adv__title div i {
  font-size: 40px;
}

.login_adv__title div i.add {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.6);
}

.login_adv__bottom {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  color: #fff;
  padding: 40px;
  background-image: linear-gradient(transparent, #000);
}

.login_main {
  flex: 1;
  overflow: auto;
  display: flex;
}

.login-form {
  width: 400px;
  margin: auto;
  padding: 20px 0;
}

.login-header {
  margin-bottom: 20px;
}

.login-header .logo {
  display: flex;
  align-items: center;
}

.login-header .logo img {
  width: 35px;
  height: 35px;
  vertical-align: bottom;
  margin-right: 10px;
}

.login-header .logo label {
  font-size: 24px;
}

.login-header h2 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 50px;
}

.login-oauth {
  display: flex;
  justify-content: space-around;
}

.login-form .el-divider {
  margin-top: 40px;
}

.el-dropdown-menu__item.selected {
  color: var(--el-color-primary);
}

@media (max-width: 1200px) {
  .login-form {
    width: 340px;
  }
}

@media (max-width: 1000px) {
  .login_main {
    display: block;
  }

  .login-form {
    width: 100%;
    padding: 20px 40px;
  }

  .login_adv {
    display: none;
  }
}
</style>
